<template>
	<u-popup :show="loginShow" @close="offClick">
		<view class="content-padding-layout">
			<view class="menu-padding-spac-y">
				<u-avatar src="/static/img/logo.jpg" size="90rpx" />
			</view>
			<view class="few-text-font menu-padding-spac-y">登录，享受完整服务</view>
<!-- 			<view>
				<view class="menu-padding-spac-y">
					<button class="login-button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true">
						<view class="user_name">使用手机号登录</view>
					</button>
				</view>
				<u-button @click="offClick">暂不登录</u-button>
			</view> -->
			<view>
				<view class="menu-padding-spac-y">
					<u-button type="primary" @click="wxLogin">立即登录</u-button>
				</view>
				<u-button @click="offClick">暂不登录</u-button>
			</view>
		</view>
    </u-popup>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { decryptPhone } from "@/config/api.js";

export default {
	data() {
		return {
			code: '',
			phone: '',
			iv: ''
		}
	},
	computed: {
		...mapState(['loginShow'])
	},
	methods: {
		...mapMutations(['setLoginShow', 'setToken', 'setUser']),
		offClick() {
			this.setLoginShow(false)
		},
		wxLogin() {
			var that = this
			uni.login({
				provider: 'weixin',
				success: async (loginRes) => {
					if (loginRes.code) {
						const res = await decryptPhone({ code: loginRes.code })
						if (res && res.data) {
							this.setUser(res.data.user);
							this.setToken(res.data.token);
							this.setLoginShow(false);
						} else {
							console.error("获取用户信息失败");
						}
					}
				},
				fail: (err) => {
					that.getUserInfo()
				}
			})
		},
		async getUserInfo() {
			const res = await getInfo();
			if (res && res.user) {
				this.setUser(res.user);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.content-padding-layout {
	padding: 32rpx;
	padding-bottom: 0;
}
.menu-padding-spac-y {
	padding: 8rpx 0;
}
.few-text-font {
	font-size: 26rpx;
	line-height: 32rpx;
	font-weight: 500;
}
.login-button {
	background-color: transparent;
	color: #333;
	border: none;
	outline: none;
}
</style>
